<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title></title>
  <link rel="stylesheet" href="{{@BASE}}/assets/layui/css/layui.css">
  <link rel="stylesheet" href="{{@BASE}}/assets/web.css">
  <script src="{{@BASE}}/assets/jquery.min.js"></script>
  <script type="text/javascript">
      var ext_img=new Array('{{@data['ext_img']}}');
      var image_editor= false;
  </script>
</head>
<body>
<input type="hidden" name="field_id" id="field_id" value="{{@data['field_id']}}">
<input type="hidden" name="cur_dir" id="cur_dir" value="{{@data['cur_dir']}}">
<input type="hidden" name="base_url" id="base_url" value="{{@data['base_url']}}">
<input type="hidden" name="return_relative_url" id="return_relative_url" value="{{@data['return_relative_url']}}"/>
<input type="hidden" name="callback" id="callback" value="{{@data['callback']}}">
<div class="container-fluid">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <div class="layui-row">
          <div class="layui-col-md6">
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-on="upload"><i class="layui-icon layui-icon-upload-circle"></i></button>
            <button class="layui-btn layui-btn-sm btn new-folder" lay-on="new-folder" title="" data-original-title="New Folder"><i class="icon-plus"></i><i class="icon-folder-open"></i></button>
          </div>
          <div class="layui-col-md6"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row-fluid">
    <ul class="breadcrumb">
      <li><a href="{{@BASE}}"><i class="icon-home"></i></a></li>
      <repeat group="{{ @breadcrumb }}" key="{{ @key }}" value="{{ @item }}">
      <li class="active">/ <a href="{{@item['link']}}">{{@item['label']}}</a></li>
      </repeat>
    </ul>
  </div>
  <ul class="grid cs-style-2 list-view0" id="main-item-container">
    <check if="{{!empty(@path)}}">
      <li data-name=".." class="back  ui-droppable">
        <figure data-name=".." data-path="{{@path}}/.." class="back-directory" data-type="">
          <a class="folder-link" href="{{@data['last_url']}}">
              <div class="img-precontainer">
                      <div class="img-container directory"><span></span>
                      <img class="directory-img loaded" data-src="./assets/img/ico/folder_back.png" src="./assets/img/ico/folder_back.png" data-was-processed="true">
                      </div>
              </div>
              <div class="img-precontainer-mini directory">
                      <div class="img-container-mini">
                      <span></span>
                      <img class="directory-img" data-src="./assets/img/ico/folder_back.png">
                      </div>
              </div>
              <div class="box no-effect"><h4 class="ellipsis">back</h4></div>
          </a>
        </figure>
      </li>
    </check>
    <repeat group="{{ @lists }}" key="{{ @ikey }}" value="{{ @idiv }}">
        <li class="ff-item-type {{@idiv['type']}} ui-draggable ui-draggable-handle" data-name="{{@idiv['file']}}">            
            <figure data-name="{{@idiv['file']}}" data-path="{{@idiv['file']}}" data-type="{{@idiv['type']}}">
          <check if="{{ @idiv['is_dir']==true }}">
            <a href="{{@idiv['src']}}" class="folder-link" data-file="{{@idiv['file']}}" data-type="{{@idiv['type']}}">
            <div class="img-precontainer">
              <div class="img-container directory">
                <span></span>
                <img class="loaded" data-src="{{@idiv['thumb']}}" src="{{@idiv['thumb']}}" data-was-processed="true">
              </div>
            </div>
            <div class="img-precontainer-mini original-thumb">
              <div class="filetype {{@idiv['extension']}}  hide">{{@idiv['extension']}}</div>
              <div class="img-container-mini">
                <img class="" data-src="{{@idiv['thumb']}}">
              </div>
            </div>
            <div class="box"><h4 class="ellipsis">{{@idiv['file_name']}}</h4></div>
            </a>
          </check>
          <check if="{{ @idiv['is_dir']==false }}">
        <div class="selector">
          <label class="cont">
            <input type="checkbox" class="selection" name="selection[]" value="{{@idiv['file']}}">
            <span class="checkmark"></span>
          </label>
        </div>
        <a href="javascript:void('')" class="link" data-file="{{@idiv['file']}}" data-function="{{@data['apply_type']}}">
          <div class="img-precontainer">
            <div class="img-container">
              <img class="loaded" data-src="{{@idiv['thumb']}}" src="{{@idiv['thumb']}}" data-was-processed="true" width="122" height="91">
            </div>
          </div>
          <div class="img-precontainer-mini original-thumb">
            <div class="filetype {{@idiv['extension']}}  hide">{{@idiv['extension']}}</div>
            <div class="img-container-mini">
              <img class="" data-src="{{@idiv['thumb']}}">
            </div>
          </div>
          <div class="box"><h4 class="ellipsis">{{@idiv['file']}}</h4></div>
          </a>
          <input type="hidden" class="date" value="{{@idiv['date']}}">
          <input type="hidden" class="size" value="{{@idiv['size']}}">
          <input type="hidden" class="extension" value="{{@idiv['extension']}}">
          <input type="hidden" class="name" value="{{@idiv['file']}}">
          <div class="file-date">{{date('Y-m-d', @idiv['date'])}}</div>
          <div class="file-size">{{@idiv['size']|makeSize}}</div>
          <check if="{{ @idiv['is_dir']==false && @idiv['type'] =='img' }}">
          <div class="img-dimension">{{@idiv['width']}}x{{@idiv['height']}}</div>
          </check>
          <div class="file-extension">{{@idiv['extension']}}</div>          
          </check>
          <figcaption>
              <check if="{{ @idiv['is_dir']==false && @idiv['type'] =='img' }}">
              <a class="tip-right preview" title="" data-featherlight="{{@idiv['src']}}" href="#" data-original-title="Preview" lay-on="view"><i class=" icon-eye-open"></i></a>
              </check>
              <a href="javascript:void('')" class="tip-left edit-button rename-file-paths rename-file" title="" lay-on="rename" data-id="{{@idiv['file']}}" data-name="{{@idiv['file_name']}}" data-original-title="Rename">
                <i class="icon-pencil "></i></a>

                <a href="javascript:void('')" class="tip-left erase-button delete-file" title="" lay-on="delete" data-id="{{@idiv['file']}}" data-original-title="Erase">
                  <i class="icon-trash "></i>
                </a>
            </figcaption>
          </figure>
        </li>
    </repeat>      
  </ul>
</div>

<!-- body 末尾處引入 layui -->
<script src="{{@BASE}}/assets/layui/layui.js"></script>
<script src="{{@BASE}}/assets/main.js"></script>

<script>
  layui.use(function(){
    var layer = layui.layer;
    var form = layui.form;
    var laydate = layui.laydate;
    var util = layui.util;
    var upload = layui.upload;
    var element = layui.element;
    var csrf = {{@csrf|json_encode}};
    var $ = layui.$;
    var ps_data = {
      'type':'do',
      'path': '{{@path}}',
    };
    ps_data[csrf['token']] = csrf['param'];
    var action_url = '{{@BASE}}/upload';
    util.on({
      'delete':function(data){
        var id = data.data("id");
        var new_index = layer.confirm('Are you sure delete this item？', {
          title:'',
          btn: ['Confirm', 'Cancel'] //按鈕
        }, function(){
          ps_data['type'] = 'dod';
          ps_data['name'] = id;
          $.ajax({
              url:action_url,
              type:"post",
              data:ps_data,
              dataType:"json",
              success:function(data){
                if(data.msg){
                  layer.alert(data.msg,{title:"", btn:['OK']}, function(){
                      layer.closeAll();
                      if(data.status){
                        window.location.reload();
                      }
                  });
                }
              },
              error:function(err){
                console.log(err);
              }
            });
        });
      },
      'new-folder':function(){
        var new_index = layer.open({
          type: 1,
          area: '350px',
          resize: false,
          shadeClose: true,
          title: 'New Folder',
          content: `
            <div class="layui-form" lay-filter="filter-new-folder" style="margin: 16px;">
              <div class="new-folder-container">
                <div class="layui-form-item">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-folder"></i>
                    </div>
                    <input type="text" name="new_folder" value="" lay-verify="required" placeholder="Folder Name" lay-reqtext="Cannot be blank" autocomplete="off" class="layui-input" lay-affix="clear">
                  </div>
                </div>
                <div class="layui-form-item">
                  <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="new-folder">Create</button>
                </div>
              </div>
            </div>
          `,
          success: function(){
            // 對彈層中的表單進行初始化渲染
            form.render();
            // 表單提交事件
            form.on('submit(new-folder)', function(data){
              var field = data.field; // 獲取表單字段值
              ps_data['type'] = 'dom';
              ps_data['new_folder'] = field['new_folder'];
              $.ajax({
                url:action_url,
                type:"post",
                data:ps_data,
                dataType:"json",
                success:function(data){                  
                  if(data.msg){
                    layer.alert(data.msg,{title:"", btn:['OK']}, function(){
                      layer.closeAll();
                      if(data.status){
                        window.location.reload();
                      }
                    });
                  }
                },
                error:function(err){
                  console.log(err);
                }
              });
              return false; // 阻止默認 form 跳轉
            });
          }
        });
      },
      'upload':function(){
        layer.open({
          type: 1,
          area: ['100%', '100%'],
          resize: true,
          shadeClose: true,
          title: 'New Folder',
          content: `<div class="layui-upload" style="padding:15px;">
                    <div id="ID-upload-drop_zone" style="width:100%; height:120px; border:2px dashed #ccc; text-align:center; line-height:120px;margin-bottom:15px;"><i class="layui-icon layui-icon-upload"></i></div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">水印</label>
                      <div class="layui-input-block">
                      <input type="text" class="layui-input" name="water">
                      </div>
                      <div class="layui-input-block">
                      <select class="layui-select" name="position"><option value="all">全部</option><option value="topleft">左上角</option><option value="topright">右上角</option><option value="bottomleft">左下角</option><option value="bottomright">右下角</option><option value="middlecenter">中间</option></select>
                      </div>
                    </div>
                    <button type="button" class="layui-btn" id="ID-upload-demo-files-action">開始上傳</button>
                    </div>
                    <div class="layui-upload-list">
                      <table class="layui-table">
                        <colgroup>
                          <col style="min-width: 100px;">
                          <col width="150">
                          <col width="260">
                          <col width="150">
                        </colgroup>
                        <thead>
                          <th>文件名</th>
                          <th>大小</th>
                          <th>上傳進度</th>
                          <th>操作</th>
                        </thead>
                        <tbody id="ID-upload-demo-files-list"></tbody>
                      </table>
                    </div>`,
          success: function(){
            ps_data['water'] = function(){
              return $("[name='water']").val();
            };
            ps_data['position'] = function(){
              return $("[name='position']").val();
            };
            var uploadListIns = upload.render({
                elem: '#ID-upload-drop_zone',
                elemList: $('#ID-upload-demo-files-list'), // 列表元素對象
                url: action_url, // 實際使用時改成您自己的上傳接口即可。
                data:ps_data,
                accept: 'file',
                multiple: true,
                number: {{@data['max_upload_files']}},
                auto: false,
                bindAction: '#ID-upload-demo-files-action',
                choose: function(obj){   
                  var that = this;
                  var files = this.files = obj.pushFile(); // 將每次選擇的文件追加到文件隊列
                  // 讀取本地文件
                  obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">',
                      '<td>'+ file.name +'</td>',
                      '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',
                      '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                      '<td>',
                        '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重傳</button>',
                        '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">刪除</button>',
                      '</td>',
                    '</tr>'].join(''));
                    
                    // 單個重傳
                    tr.find('.demo-reload').on('click', function(){
                      obj.upload(index, file);
                    });
                    
                    // 刪除
                    tr.find('.demo-delete').on('click', function(){
                      delete files[index]; // 刪除對應的文件
                      tr.remove(); // 刪除表格行
                      // 清空 input file 值，以免刪除後出現同名文件不可選
                      uploadListIns.config.elem.next()[0].value = ''; 
                    });
                    
                    that.elemList.append(tr);
                    element.render('progress'); // 渲染新加的進度條組件
                  });
                },
                done: function(res, index, upload){ // 成功的回調
                  var that = this;
                  if(res.status == 1){ // 上傳成功
                    var tr = that.elemList.find('tr#upload-'+ index)
                    var tds = tr.children();
                    tds.eq(3).html(''); // 清空操作
                    delete this.files[index]; // 刪除文件隊列已經上傳成功的文件
                    return;
                  }
                  this.error(index, upload, res);
                },
                allDone: function(obj){ // 多文件上傳完畢後的狀態回調
                  console.log(obj)
                },
                error: function(index, upload, res){ // 錯誤回調
                  console.log(res);
                  var that = this;
                  var tr = that.elemList.find('tr#upload-'+ index);
                  var tds = tr.children();
                   // 顯示重傳
                  tds.eq(3).find('.demo-reload').removeClass('layui-hide');
                },
                progress: function(n, elem, e, index){ // 註意：index 參數為 layui 2.6.6 新增
                  element.progress('progress-demo-'+ index, n + '%'); // 執行進度條。n 即為返回的進度百分比
                }
              });
          }
          ,end:function(){
            window.location.reload();
          }
        });
      }
      ,'view':function(obj){
        var img_src = obj.data("featherlight");
        img_alt = obj.data("original-title");
        if(img_src){
          layer.photos({
            photos: {
              "title": "Photos Demo",
              "start": 0,
              "data": [
                {
                  "alt": img_alt,
                  "pid": 5,
                  "src": img_src,
                }
              ]
            },
            footer: false // 是否显示底部栏 --- 2.8.16+
          });          
        }
      }
      ,'rename':function(obj){
        var file_id = obj.data("id");
        var file_name = obj.data("name");
        var new_index = layer.open({
          type: 1,
          area: '350px',
          resize: false,
          shadeClose: true,
          title: 'Re-Name',
          content: `
            <div class="layui-form" lay-filter="filter-re-name" style="margin: 16px;">
              <div class="re-name-container">
                <div class="layui-form-item">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-folder"></i>
                    </div>
                    <input type="text" name="name" value="${file_name}" lay-verify="required" placeholder="Folder Name" lay-reqtext="Cannot be blank" autocomplete="off" class="layui-input" lay-affix="clear">
                  </div>
                </div>
                <div class="layui-form-item">
                  <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="re-name">Submit</button>
                </div>
              </div>
            </div>
          `,
          success: function(){
            // 對彈層中的表單進行初始化渲染
            form.render();
            // 表單提交事件
            form.on('submit(re-name)', function(data){
              var field = data.field; // 獲取表單字段值
              ps_data['type'] = 'dor';
              ps_data['name'] = field['name'];
              ps_data['file_id'] = file_id;
              if(field['name'] == file_name || ps_data['file_id']==""){
                layer.close(new_index);
                 return false;
              }
              $.ajax({
                url:action_url,
                type:"post",
                data:ps_data,
                dataType:"json",
                success:function(data){
                  if(data.msg){
                    layer.alert(data.msg,{title:"", btn:['OK']}, function(){
                      layer.closeAll();
                      if(data.status){
                        window.location.reload();
                      }
                    });
                  }
                },
                error:function(err){
                  console.log(err);
                }
              });
              return false; // 阻止默認 form 跳轉
            });
          }
        });
      }
    });
  });
</script>
</body>
</html>
